<template>
	<div class="wrapper" @click="() => { moreShow = false; }">
		<view class="header-box">
			<u-navbar height="88rpx" safeAreaInsetTop placeholder bgColor="#FFFFFF"
				titleStyle="font-size: 16px; font-weight: 500; color: #000000;" class="navbar" @leftClick="leftClick(urlIndex)">
				<view class="u-center-slot" slot="center">
					<view class="nav-title omit">{{ $t('newDeal.Progress')}}</view>
				</view>
				<view class="u-right-slot" slot="right">
					<u-icon name="more-dot-fill" color="#000000" size="20px"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="fee-order-info">
			<view class="item-left">
				<view class="price">$120</view>
				<!-- <view class="price">{{ getCoinName(item.currencyId) }}{{ item.remuneration }}</view> -->
				<view class="weizhi-view">
					<view class="iconfont icon-weizhi-1 weizhi"></view>
					<view class="center omit">商店到处都是接口测试得出</view>
					<!-- <view class="center omit">{{ item.workPlace }}</view> -->
				</view>
			</view>
			<view class="left-title omit">jsdbcjscskcsdnc开设赌场女司机开车你记得上次</view>
			<!-- <view class="left-title omit">{{ item.title }}</view> -->
			<view class="line"></view>
			<view class="item-center">
				<view class="iconfont icon-jiezhishijian weizhi"></view>
				<view class="center">15 May 2020 9:00 am</view>
				<!-- <view class="center">{{ buildI18nTime(item.deadline) }}</view> -->
			</view>
		</view>
		<view class="white-box">
			<OrderTimeline />
		</view>
		<view class="white-box">
			<view class="text-tip">{{ $t('newDeal.tips') }}</view>
			<view class="text-btn">{{ $t('order.contact-administrator') }}</view>
		</view>
		<template v-if="false">
			<u-navbar title=" " @leftClick="goBack" bgColor="#F6F6F6">
			</u-navbar>
			<image class="avatar-box" :src="groupInfo.avatarCompress" @click="showPreview(groupInfo.avatarCompress)"
				mode="aspectFill"></image>
			<!-- <image
				class="avatar-box"
				:src="friendInfo.avatar || 'http://www.omlook.com/imol/default_male.png'"
				@click="showPreview(peopleDetail.avatar)"
				mode="aspectFill"
			></image> -->
			<view class="nickname">{{ commentName }}</view>
			<view class="online-time">{{ getTimeDiff(friendInfo.lastLoginTime, "minutes", true, -3) }}</view>
			<!-- <view class="online-time" v-if="!friendInfo.isOnline">{{ getTimeDiff(friendInfo.lastLoginTime, "minutes", true) }}</view>
			<view class="online-status" v-else>{{ $t("chat.Online") }}</view> -->
			<view class="user-msg-tip" v-if="peopleDetail.userPersonalsId">
				<text v-if="peopleDetail.userAge !== null">{{ peopleDetail.userAge }}{{ $t("contacts.age") }}
				</text>
				<text v-if="peopleDetail &&
					peopleDetail.userJson &&
					peopleDetail.userJson.height !== ''
					">{{ " / " + peopleDetail.userJson.height }}cm
				</text>
				<text v-if="peopleDetail &&
					peopleDetail.userJson &&
					peopleDetail.userJson.weight !== ''
					">{{ " / " + peopleDetail.userJson.weight }}kg</text>
			</view>
			<view class="user-region" v-if="peopleDetail.userPersonalsId && (peopleDetail.country || peopleDetail.region)">
				<view class="iconfont icon-weizhi"></view>
				{{ `${peopleDetail.country ? peopleDetail.country + ',' : ''}${peopleDetail.region}` }}
			</view>
			<view class="box-group">
				<!-- 免打扰 -->
				<view class="box-item" @click="muteHandle">
					<view class="iconfont icon-jingyin box-icon" v-if="!isDonotdisturb"></view>
					<view class="iconfont icon-quxiaojingyin box-icon" v-else></view>
					<view class="box-text">{{ $t("chat.mute") }}</view>
				</view>
				<!-- 搜索 -->
				<!-- <view class="box-item" @click="toSearch">
					<view class="iconfont icon-sousuo1 box-icon"></view>
					<view class="box-text">{{ $t("index.Search") }}</view>
				</view> -->
				<!-- 更多操作 -->
				<view class="box-item" @click.stop="getMore" >
					<view class="iconfont icon-gengduo2 box-icon"></view>
					<view class="box-text">{{ $t("chat.more") }}</view>
					<!-- 弹出菜单 -->
					<view :style="{
						opacity: moreShow ? 1 : 0,
						'pointer-events': moreShow ? '' : 'none',
					}" class="more-popup">
						<view class="more-menu" v-for="(t, i) in moreOption" :key="i" @click.stop="moreClick(t)">
							<view class="icon">
								<view :class="t.icon" :style="{ color: t.color }"></view>
							</view>
							<view class="name" :style="{ color: t.color }">{{ t.name }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="normal-box" v-if="peopleDetail.labelBoList && peopleDetail.labelBoList.length > 0">
				<view class="title">{{ $t("dating.PurposeLow") }}</view>
				<view v-for="(item, index) in peopleDetail.labelBoList" :key="index">
					<view class="link-green omit">#{{ getLabelLangType(item) }}</view>
				</view>
			</view>
			<view class="normal-box" v-if="peopleDetail &&
				peopleDetail.userJson &&
				peopleDetail.userJson.brief !== ''
				">
				<view class="title">{{ $t("dating.aboutMeLow") }}</view>
				<view class="require">{{ peopleDetail.userJson.brief }}</view>
			</view>
			<!-- 手机号 -->
			<!--    <view class="normal-box">
				<view class="title">{{ $t("chat.mobile") }}</view>
				<view class="link-green" v-if="friendInfo.userPhonePrivacy == 2 || (friendInfo.userPhonePrivacy == 1 && friendInfo.userPhone)">{{ '+' + friendInfo.internationalAreaCode }} {{ friendInfo.userPhone || '-' }}</view>
				<view class="link-red" v-else>{{ $t("Hidden") }}</view>
			</view> -->
			<!-- 电子邮箱 -->
			<!-- <view class="normal-box">
				<view class="title">{{ $t("chat.E-mail") }}</view>
				<view class="link-green" v-if="friendInfo.emailPrivacy == 2 || (friendInfo.emailPrivacy == 1 && friendInfo.email)">{{ friendInfo.email || '-' }}</view>
				<view class="link-red" v-else>{{ $t("Hidden") }}</view>
			</view> -->

			<!-- 添加通讯录 -->
			<view class="box-line column" v-if="moduleType == 1">
				<view class="line-one" v-if="!isFriend" @click="handleAddFriend">{{ $t("chat.Add-to-Contacts") }}</view>
				<!-- <view class="line-two" v-if="isblack !== '' && isblack" @click="moreClick({type: 'removeBlockUser'})">{{ $t("chat.remove-User") }}</view>
				<view class="line-two" v-else @click="moreClick({type: 'blockUser'})">{{ $t("chat.Block-User") }}</view> -->
			</view>
			<!-- 添加联系人弹出层 -->
			<u-popup class="AddContacts-warpper-popup" :show="showContacts" mode="bottom" @close="closeAddContacts"
				@open="openAddContacts">
				<view class="AddContacts-warpper">
					<view class="AddContacts-warpper__header">
						<view class="AddContacts-warpper__header__left" @click="closeAddContacts">
							{{ $t('index.Cancel') }} <!-- 取消  -->
						</view>
						<view class="AddContacts-warpper__header__title">
							{{ $t("chat.Add-to-Contacts") }}
						</view>
						<view class="AddContacts-warpper__header__right" @click="handleAddContactDone">
							{{ $t('index.Done') }} <!-- 完成  -->
						</view>
					</view>

					<view class="AddContacts-warpper__container">
						<view class="user-card-info">
							<image class="user-card-info-photo" :src="friendInfo.avatar"
								v-if="isPeopleAvatarExit(friendInfo.avatar)" mode="aspectFill">
							</image>
							<view class="avatar-box avator-font-setting"
								:style="{ background: `${getDefaultColor(friendInfo.avatarColorCode)}`, fontSize: '64upx' }"
								v-else>
								{{ (formatUserName(friendInfo) || commentName).slice(0, 1) }}</view>
							<view class="info-right">
								<input class="info-right-name" v-model="addFriendInfo.firstName"
									:placeholder="$t('setting.FirstName')" :placeholder-style="placeholderStyle"></input>
								<input class="info-right-lastName" v-model="addFriendInfo.lastName"
									:placeholder="$t('setting.LastName')" :placeholder-style="placeholderStyle"></input>
							</view>
						</view>
						<view class="phone-line">
							<view class="line-text">{{ $t("chat.mobile") }}</view>
							<view class="line-content"
								v-if="friendInfo.userPhonePrivacy == 2 || (friendInfo.userPhonePrivacy == 1 && friendInfo.userPhone)">
								{{ '+' + friendInfo.internationalAreaCode }} {{ friendInfo.userPhone || "-" }}</view>
							<view class="line-content" v-else>{{ $t("Hidden") }}</view>
						</view>
					</view>
				</view>
			</u-popup>

			<!-- 解散群聊 -->
			<u-modal :show="confirmShow" :title="$t('index.operation')" :confirmText="$t('confirm')" :cancelText="$t('cancel')"
				@confirm="confirm" :showCancelButton="true" @cancel="() => {
						confirmShow = false;
					}
					">
				<view class="slot-content">{{ $t("index.operation-content") }}</view>
			</u-modal>
		</template>
	</div>
</template>

<script>
// 订单 start
import OrderTimeline from './components/OrderTimeline.vue'
import { buildI18nTime } from "@/utils/date-util.js";
// 订单 end
import { queryFriendsList, queryAddFriend, deleteFriend } from "@/services/friends";
import { blockUserList, unBindBlockUser } from '@/services/user'
import { queryOtherUserChatDetail } from "@/services/makeFriend";
import {
	getGroupMemberInfo,
	getRoleName,
	getGroupMemberList,
	getGroupInfo,
	getUserInfo,
	cleanMessage,
	addBlackUser,
	getTargetUserInfo,
	formatUserInfo,
	getTimeDiff,
	getDefaultColor,
	updateOlUsersName
} from "@/utils/index.js";
import { mapState, mapMutations } from "vuex";
import {
	quitGroup,
	dismissGroup,
	groupGagBack,
	groupGag,
	setManage,
	removeManage,
} from "@/services/group";
import { muteChange, getConversationNoticeStatus } from "@/utils/RongIM";
export default {
	name: "SaleSetting",
	data() {
		return {
			urlIndex: 'SaleSetting',
			showContacts: false, // 添加联系人弹出层的显示与隐藏
			top: "",
			userId: "",
			friendInfo: {},
			id: "",
			groupId: "", //群组Id
			// 是否为多人群聊
			isGroupChat: "",
			groupList: [],
			confirmShow: false,
			confirmType: "confirmType",
			gagLoading: false,
			isTaboo: false,
			moreShow: false,
			isDonotdisturb: 0, //是否消息免打扰
			friendId: "",
			commentName: "",
			peopleDetail: {},
			language: '',
			BlackListUserId: [], // 黑名单
			isblack: '',
			removeBlackUserId: '', // 要移除黑名单的id值
			isFirstLoad: true, // 是否第一次加载页面
			addFriendInfo: {},
			placeholderStyle: "fontSize: 28rpx;	color: #A6A6A6",
			moduleType: null,
		};
	},
	components: { OrderTimeline },
	computed: {
		...mapState(["userInfo"]),
		// 是否为好友
		isFriend() {
			return this.friendInfo.isFriend || 0;
		},
		//群组数据
		groupInfo() {
			if (this.groupId) return getGroupInfo(this.groupId);
			else return {};
		},
		//当前用户角色
		curUser() {
			var data = this.groupList.find(
				(o) => o.userVo.userId == this.$store.state.userInfo.userId
			);
			return data;
		},
		//more配置
		moreOption() {
			if (this.moduleType == 6) {
				var arr = [
					// 清空聊天记录
					{
						type: "cleanMessages",
						icon: "iconfont icon-shanchuliaotianjilu",
						name: this.$t("chat.Clean-Messages"),
						color: "#000000",
					},
				]
			}
			else {
				var arr = [
					// 清空聊天记录
					{
						type: "cleanMessages",
						icon: "iconfont icon-shanchuliaotianjilu",
						name: this.$t("chat.Clean-Messages"),
						color: "#000000",
					},
					// 离开
					{
						type: "leaveGroup",
						icon: "iconfont icon-tuichu",
						name: this.$t("chat.Leave-Group"),
						color: "#FE6600",
					},
				];
			}

			console.log(this.isGroupChat)
			return arr || [];
		},
	},
	methods: {
		...mapMutations([
			"SET_SELECT_FRIEND_OPTION",
			"SET_SELECT_CHAT_OPTION",
			"SET_FRIEND_LIST",
		]),
		// 订单 start
		buildI18nTime,
		// 订单 end
		getDefaultColor,
		getTimeDiff,
		getRoleName,
		getGroupInfo,
		addBlackUser, // 加入黑名单
		// 返回上一頁
		goBack() {
			if (getCurrentPages().length < 2) {
				uni.redirectTo({
					url: `/${uni.getStorageSync("prePagesUrl")}`,
				});
			} else {
				uni.navigateBack()
			}
		},
		// 分页获取个人黑名单列表
		async getBlackList() {
			uni.showLoading()
			const resp = await blockUserList()
			if (resp.success) {
				this.BlackListUserId = resp.result.rows.map(item => {
					console.log(item)
					return { userId: item.userVo.userId, id: item.id }
				})
				this.isblacklist()
			}
		},
		// 判断是否在黑名单内
		async isblacklist() {
			const targetId = this.friendInfo.userId // 目标id
			let index = await this.BlackListUserId.findIndex(o => o.userId === targetId)
			if (index === -1) {
				this.isblack = false
				this.removeBlackUserId = ''
				if (!this.isFirstLoad) {
					uni.showToast({ title: this.$t('index.del-success'), icon: 'none', duration: 1500 })
				}
			} else {
				this.isblack = true
				this.removeBlackUserId = this.BlackListUserId[index].id
				if (!this.isFirstLoad) {
					uni.showToast({
						title: this.$t("index.add-success"),
						icon: "none",
						duration: 1500
					});
				}
			}
			uni.hideLoading()
			this.isFirstLoad = false
		},
		// 移除黑名单
		async removeBlockUser() {
			uni.showLoading()
			const resp = await unBindBlockUser(this.removeBlackUserId)
			if (!resp.success) return
			this.getBlackList()
		},

		getLabelLangType(obj) {
			if (this.language === "zh-Hans") {
				return obj.label.cn;
			} else if (this.language === "en") {
				return obj.label.en;
			} else if (this.language === "ru") {
				return obj.label.ru;
			}
		},

		//预览
		showPreview(url) {
			if (url) {
				uni.previewImage({
					urls: [url],
				});
			}
		},
		// 跳转搜索聊天记录
		toSearch() {
			uni.navigateTo({
				url: `/pagesTool/chatRecord/ChatRecord?targetId=${this.friendInfo.userId}&conversationType=${this.isGroupChat ? 3 : 1}`,
			});
		},
		//免打扰点击
		async muteHandle() {
			uni.showLoading()
			const conversationType = this.isGroupChat ? 3 : 1;
			const options = {
				targetId: this.groupId || this.friendInfo.userId,
				conversationType,
				type: this.isDonotdisturb == 0 ? 1 : 0,
			};
			await muteChange(options);
			this.isDonotdisturb = this.isDonotdisturb == 0 ? 1 : 0;
			uni.hideLoading()
		},
		// 获取免打扰级别
		async messageStatus() {
			const options = {
				conversationType: this.isGroupChat ? 3 : 1,
				targetId: this.groupId || this.friendInfo.userId,
			};
			const { data } = await getConversationNoticeStatus(options);
			console.log(data, "免打扰");
			if (data == null || data == -1) {
				this.isDonotdisturb = 0;
			} else {
				this.isDonotdisturb = data;
			}
		},
		//更多菜单点击
		async moreClick(data) {
			this.moreShow = false;
			const { type } = data;
			switch (type) {
				case "silence":
					this.toggleTaboo(type);
					break;
				case "Unblock":
					this.toggleTaboo(type);
					break;
				case "cleanMessages":
					cleanMessage({
						targetId: this.groupId || this.friendInfo.userId,
						conversationType: this.isGroupChat ? 3 : 1,
					});
					console.log(this.$store.state);
					let { chatList } = this.$store.state;
					if (this.isGroupChat) {
						let chat = chatList.find((o) => o.targetId == this.groupId);
						chat.latestMessage.content = "";
						this.$store.state.groupChatInfo[this.groupId] = [];
					} else {
						// let chat = chatList.find((o) => o.targetId == this.userId);
						// chat.latestMessage.content = "";
						// this.$store.state.privateChatInfo[this.userId] = [];
					}
					break;
				case "deleteGroup":
					this.leaveGroup();
					break;
				case "leaveGroup":
					this.leaveGroup();
					break;
				case "blockUser":
					// 加入黑名单
					uni.showLoading()
					const resp = await this.addBlackUser([this.friendInfo.userId], this);
					if (resp) {
						this.getBlackList()
					} else {
						uni.hideLoading()
					}
					break;
				case "removeBlockUser":
					// 移除黑名单
					this.removeBlockUser()
					break
				default:
					break;
			}
		},
		// 获取好友信息
		async getFriendsList() {
			const resp = await queryFriendsList({
				pageNum: 1,
				pageSize: 999,
			});
			if (!resp.success) return;
			const info = resp.result.rows

			this.SET_FRIEND_LIST(info);
		},
		//获取更多操作
		getMore() {
			this.moreShow = !this.moreShow;
		},
		rightClick() {
			console.log("rightClick");
		},
		//群禁言
		toggleTaboo(type) {
			this.gagLoading = true;
			if (type == "Unblock") {
				groupGagBack({ groupId: this.groupId })
					.then((res) => {
						this.gagLoading = false;
						if (res.success) {
							this.isTaboo = false;
							uni.showToast({
								title: "success",
								icon: "success",
							});
							uni.navigateTo({
								url: "/pages/friends/GroupChatList",
							});
						}
					})
					.catch((err) => {
						this.gagLoading = false;
					});
			} else {
				groupGag({ groupId: this.groupId })
					.then((res) => {
						this.gagLoading = false;
						if (res.success) {
							this.isTaboo = true;
							uni.showToast({
								title: "success",
								icon: "success",
							});
							uni.navigateTo({
								url: "/pages/friends/GroupChatList",
							});
						}
					})
					.catch((err) => {
						this.gagLoading = false;
					});
			}
		},
		//确认弹窗
		confirm() {
			if (this.confirmType == "dismissGroup") {
				dismissGroup({ groupId: this.groupId }).then((res) => {
					if (res.success) {
						this.goHome();
					}
				});
			}
		},
		//回首页
		goHome() {
			// uni.switchTab({
			// 	url: '/pages/home/home'
			// });
			var { chatList } = this.$store.state;
			chatList = chatList.filter((o) => o.targetId != this.groupId);
			this.$store.dispatch("changeChatList", chatList);
			uni.switchTab({
				url: "/pages/chat/Chat",
			});
		},
		//退出群组
		leaveGroup(userId) {
			console.log('xixi')
			let id = userId || this.$store.state.userInfo.userId;
			var user = this.groupList.find((o) => o.userVo.userId == id);
			console.log(id, user, this.groupId)
			//群主解散群聊
			if (user.userRole == 1) {
				//解散
				this.confirmType = "dismissGroup";
				this.confirmShow = true;
			} else
				quitGroup({
					userIds: [id],
					groupId: this.groupId,
				}).then(async (res) => {
					if (res.success && userId) {
						await getGroupMemberList(this.groupId);
						this.handleGroupInfo();
					} else if (res.success) {
						this.goHome();
					}
				});
		},
		//获取群组成员(特殊聊里面只会有两个人)
		async handleGroupInfo() {
			const groupInfo = await getGroupMemberInfo(this.groupId);
			this.groupList = [];
			this.$nextTick(async () => {
				this.groupList = groupInfo;
				let index = this.groupList.findIndex(
					(val) => val.userVo.userId != this.userInfo.userId
				);
				if (index !== -1) {
					// this.friendInfo = this.groupList[index].userVo
					const res = await this.getFriendInfo(this.groupList[index].userVo.userId)
					this.friendInfo = res
					if (this.moduleType == 1) {
						this._queryOtherUserChatDetail(this.friendInfo.userId);
					}
					console.log(this.friendInfo) // 对方的基本信息
				}
			});
		},
		// 点击添加联系人弹出层的完成按钮
		async handleAddContactDone() {
			const resp = await queryAddFriend({
				friendId: this.friendInfo.userId,
				commentName: this.addFriendInfo.firstName,
				commentLast: this.addFriendInfo.lastName,
			});
			if (!resp.success) return;
			this.closeAddContacts()
			this.getFriendsList()
			updateOlUsersName({
				friendId: this.friendInfo.userId,
				commentName: this.addFriendInfo.firstName,
				commentLast: this.addFriendInfo.lastName,
			})
			uni.navigateTo({
				url: `/pages/chat/PersonalChat?backType=1&targetId=${this.friendInfo.userId}`,
			});
			// uni.navigateBack()
			// uni.navigateTo({
			//   url: `/pages/chat/GroupChat?backType=1&targetId=${this.friendInfo.userId}`,
			// });
		},
		// 关闭添加联系人弹出层的回调
		closeAddContacts() {
			this.showContacts = false
		},
		// 打开添加联系人弹出层的回调
		openAddContacts() {
			// this.showContacts = true
		},
		// 打开添加联系人弹出层
		handleAddFriend() {
			this.addFriendInfo = { ...this.friendInfo }
			this.showContacts = true
		},
		// 获取用户信息
		async getFriendInfo(userId) {
			// this.friendInfo = await getUserInfo(this.userId);
			const res = await getTargetUserInfo(userId)
			return res
		},
		// 获取交友详情
		async _queryOtherUserChatDetail(id) {
			uni.showLoading()
			const resp = await queryOtherUserChatDetail(id);
			if (resp.result.code == 200) {
				resp.result.data.userJson = JSON.parse(resp.result.data.userJson);
				this.peopleDetail = this.changeAvatarPic(resp.result.data);
				this.peopleDetail.region = this.peopleDetail.region ? this.getRegionNameList(JSON.parse(this.peopleDetail.region)).join(',') : null
				this.peopleDetail.country = this.peopleDetail.country ? this.getCountryName(JSON.parse(this.peopleDetail.country)) : null
				if (this.peopleDetail.labelBoList && this.peopleDetail.labelBoList.length > 0) {
					this.peopleDetail.labelBoList.map(item => {
						item.label = JSON.parse(item.labelName);
						return item
					})
				}
			}
			uni.hideLoading()
		},
	},
	onShow() {
		this.moreShow = false;
		this.handleGroupInfo(); // 获取群组成员信息
		// this.getBlackList() // 分页获取个人黑名单列表    
		this.$nextTick(() => {
			this.messageStatus();
		});
	},
	onLoad(option) {
		this.language = uni.getLocale();
		if (option.friendId) this.friendId = option.friendId;
		if (option.commentName) this.commentName = option.commentName;
		if (option.groupId) this.groupId = option.groupId;
		if (option.moduleType) this.moduleType = option.moduleType;
		this.isGroupChat = option.isGroupChat || 0;
		const sysInfo = uni.getSystemInfoSync();
		this.top = "44px";
		this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
	},
};
</script>

<style lang="scss" scoped>
// 订单 start
.white-box {
	width: 100%;
	height: fit-content;
	padding: 30upx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 20upx;
	margin-top: 30upx;
	.text-tip {
		font-size: 28upx;
		font-weight: 400;
		color: #878787;
		line-height: 40upx;
	}
	.text-btn {
		margin-left: auto;
		width: fit-content;
		margin-top: 40upx;
		padding: 0upx 20upx;
		height: 80upx;
		border-radius: 80upx;
		opacity: 1;
		border: 2upx solid rgba(135,135,135,0.6);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		font-weight: 500;
		color: #878787;
	}
}
.fee-order-info {
	padding: 20upx;
	background: #ffffff;
	border-radius: 20upx;

	.item-left {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.weizhi-view {
			display: flex;
			align-items: center;

			.weizhi {
				color: #878787;
				font-size: 32upx;
			}

			.center {
				margin-left: 10upx;
				font-size: 24upx;
				font-weight: 400;
				color: #878787;
			}
		}
	}

	.item-center {
		display: flex;
		align-items: center;
		margin-top: 20upx;

		.weizhi {
			color: #878787;
			font-size: 40upx;
		}

		.center {
			margin-left: 10upx;
			font-size: 24upx;
			font-weight: 400;
			color: #878787;
		}
	}

	.price {
		font-size: 32upx;
		font-weight: 500;
		color: #fe6600;
		line-height: 48upx;
	}

	.line {
		width: 100%;
		height: 2upx;
		background: rgba(0, 0, 0, 0.05);
		margin: 20upx 0upx;
	}
	.left-title {
		font-size: 32upx;
		font-weight: 500;
		color: #000000;
		line-height: 48upx;
	}
}
// 订单 end
.omit {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: break-all;
}

.header-box {
	.u-center-slot {
		width: 80%;
		margin: 0rpx 10%;

		.nav-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
		}

		.nav-status {
			margin-top: 6upx;
			margin-left: 12upx;
			font-size: 24upx;
			font-weight: 400;
			color: #1bc922;
			position: relative;
			text-align: center;
			// line-height: 1em;

			&::before {
				content: "";
				position: absolute;
				width: 8upx;
				height: 8upx;
				background: #1bc922;
				border-radius: 50%;
				top: 50%;
				transform: translateY(-50%);
				margin-left: -12upx;
			}
		}

		.nav-members {
			// font-size: 12rpx;
			// font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			color: #878787;
			font-size: 24upx;
			font-weight: 400;
			margin-top: 6upx;
			text-align: center;
		}
	}
}

.wrapper {
	width: 100vw;
	height: 100%;
	box-sizing: border-box;
	padding: 30upx 30upx;

	.u-right-slot {
		.edit-btn {
			font-size: 28upx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);
			line-height: 40upx;
		}
	}

	.avatar-box {
		width: 160upx;
		height: 160upx;
		background: linear-gradient(180deg, #85dad0 0%, #6cbdb3 100%, #6cbdb3 100%);
		border-radius: 50%;
		font-size: 64upx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 160upx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.nickname {
		height: 52upx;
		margin-top: 20upx;
		font-size: 36upx;
		line-height: 52upx;
		text-align: center;
		font-weight: 500;
		color: #000000;
	}

	.online-time {
		font-size: 28upx;
		position: relative;
		text-align: center;
		height: 40upx;
		font-weight: 400;
		color: #1bc922;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.online-status {
		font-size: 28upx;
		position: relative;
		text-align: center;
		height: 40upx;
		font-weight: 400;
		color: #1bc922;
		display: flex;
		align-items: center;
		justify-content: center;

		&::before {
			content: "";
			width: 8upx;
			height: 8upx;
			background: #1bc922;
			border-radius: 50%;
			top: 50%;
			margin-left: -12upx;
			margin-right: 4upx;
		}
	}

	.user-msg-tip {
		width: 100%;
		text-align: center;
		margin-top: 20upx;
		height: 36upx;
		font-size: 24upx;
		font-weight: 400;
		color: #878787;
		line-height: 36upx;
	}

	.user-region {
		width: fit-content;
		padding: 0upx 20upx;
		margin: 10upx auto 0upx;
		height: 56upx;
		background: #efefef;
		border-radius: 56upx;
		display: flex;
		align-items: center;
		font-size: 24upx;
		font-weight: 400;
		color: #878787;

		.icon-weizhi {
			font-size: 32upx;
			color: #61bdb2;
			margin-right: 10upx;
		}
	}

	.normal-box {
		width: 100%;
		height: fit-content;
		margin-top: 30upx;
		padding: 20upx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 20upx;

		.title {
			height: 40upx;
			font-size: 28upx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: #878787;
			line-height: 40upx;
		}

		.require {
			width: 100%;
			font-size: 32upx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: #606665;
			line-height: 48upx;
			word-wrap: break-word;
			white-space: pre-line;
			word-break: break-all;
		}

		.link-green {
			width: 100%;
			height: 48upx;
			font-size: 32upx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: #61bdb2;
			line-height: 48upx;
		}

		.link-red {
			width: 100%;
			height: 48upx;
			font-size: 32upx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: red;
			line-height: 48upx;
		}
	}

	.box-group {
		margin-top: 50upx;
		display: flex;
		justify-content: space-between;

		.box-item {
			// width: 210upx;
			width: calc((100% - 30rpx * 1) / 2);
			height: 136upx;
			background: #ffffff;
			border-radius: 20upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.more-popup {
				width: 340rpx;
				background: #ffffff;
				box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
				opacity: 1;
				transform: translate(-64rpx, 150rpx);
				position: absolute;
				border-radius: 8rpx;
				z-index: 100;
				transition: all 0.3s;

				.more-menu {
					height: 80rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					margin: 0 30rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

					.icon {
						margin-right: 24rpx;
					}
				}
			}

			.box-icon {
				font-size: 56upx;
				color: #61bdb2;
			}

			.box-text {
				font-size: 28upx;
				font-weight: 400;
				color: #61bdb2;
				line-height: 40upx;
			}
		}
	}

	.cell-line {
		margin-top: 30upx;
		width: 100%;
		height: 128upx;
		background: #ffffff;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 20upx;

		.line-text {
			font-size: 28upx;
			font-weight: 400;
			color: #878787;
			line-height: 40upx;
		}

		.line-content {
			font-size: 32upx;
			font-weight: 400;
			color: #61bdb2;
			line-height: 48upx;
		}
	}

	.column {
		display: flex;
		flex-direction: column;
		align-items: unset !important;
		justify-content: unset !important;
	}

	.box-line {
		margin-top: 30upx;
		width: 100%;
		background: #ffffff;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 0 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.right {
			justify-content: flex-end;
		}

		.line-one {
			height: 108upx;
			font-size: 32upx;
			font-weight: 400;
			color: #61bdb2;
			line-height: 108upx;
			border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
		}

		.line-two {
			height: 108upx;
			font-size: 32upx;
			font-weight: 400;
			color: #fe6600;
			line-height: 108upx;
		}

		.line-icon {
			font-size: 48upx;
			color: #61bdb2;
		}

		.line-three {
			margin-left: 14upx;
			height: 108upx;
			font-size: 32upx;
			font-weight: 400;
			color: #61bdb2;
			line-height: 108upx;
		}
	}

	.members-box {
		margin-top: 30upx;
		width: 100%;
		background: #ffffff;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 20upx;

		&.members-box>view:nth-last-child(1) {
			border-bottom: none;
		}

		.title {
			font-size: 32upx;
			font-weight: 500;
			color: #61bdb2;
			line-height: 48upx;
			padding-bottom: 20upx;
			border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
		}

		.user-line {
			width: 100%;
			height: 148upx;
			border-bottom: 2upx solid rgba(0, 0, 0, 0.05);
			display: flex;
			align-items: center;

			.avatar {
				width: 88upx;
				height: 88upx;
				border-radius: 50%;
			}

			.user-type {
				font-size: 14rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #878787;
				line-height: 20px;
				width: 100rpx;
				text-align: right;
			}

			.user-info {
				margin: 0 10upx;

				.user-name {
					font-size: 32upx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					line-height: 48upx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width: 430rpx;
				}

				.user-offline-status {
					display: flex;
					align-items: center;
					font-size: 28upx;
					font-weight: 400;
					color: #878787;
					line-height: 40upx;

					.dot {
						width: 8upx;
						height: 8upx;
						background: #1bc922;
						border-radius: 50%;
						margin-right: 10upx;
					}
				}

				.user-online-status {
					display: flex;
					align-items: center;
					font-size: 28upx;
					font-weight: 400;
					color: #1bc922;
					line-height: 40upx;

					.dot {
						width: 8upx;
						height: 8upx;
						background: #1bc922;
						border-radius: 50%;
						margin-right: 10upx;
					}
				}
			}
		}
	}

	// 添加联系人弹出层
	.AddContacts-warpper {
		height: 800rpx;

		&__header {
			display: flex;
			align-items: center;
			height: 110rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;

			&__left {
				flex: 0 0 200rpx;
				padding-left: 30rpx;
				color: #878787;
			}

			&__title {
				flex: 1;
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #000000;
			}

			&__right {
				flex: 0 0 200rpx;
				text-align: right;
				padding-right: 30rpx;
				color: #61BDB2;
			}
		}

		&__container {
			padding: 0 31rpx 0 29rpx;

			.user-card-info {
				display: flex;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 20px;
				padding: 32rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;

				// 头像
				.user-card-info-photo,
				.avatar-box {
					width: 136rpx;
					height: 136rpx;
					border-radius: 50%;
					margin-right: 51rpx;
				}

				.avatar-box {
					line-height: 136rpx;
				}

				// 右侧名称
				.info-right {
					flex: 1;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;

					.info-right-name {
						flex: 1;
						box-sizing: border-box;
						border-bottom: 4rpx solid #F6F6F6;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}

					.info-right-lastName {
						flex: 1;
						box-sizing: border-box;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			// 手机号
			.phone-line {
				margin-top: 30upx;
				width: 100%;
				height: 128upx;
				background: #ffffff;
				border-radius: 20upx;
				box-sizing: border-box;
				padding: 20upx;

				.line-text {
					font-size: 28upx;
					font-weight: 400;
					color: #878787;
					line-height: 40upx;
				}

				.line-content {
					font-size: 32upx;
					font-weight: 400;
					color: #61bdb2;
					line-height: 48upx;
				}
			}
		}
	}

	.AddContacts-warpper-popup {
		/deep/ .u-popup__content {
			background: #F6F6F6;
			border-radius: 40rpx 40rpx 0px 0px;
		}
	}
}
</style>